import React from 'react';
import { Button, Row, Col } from 'antd';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterTool from '../../../components/FilterTool';
import PermissionAdd from './add';
import PermissionList from './list';

class Permission extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'permission';
    this.addComponent = PermissionAdd;
    this.editComponent = PermissionAdd;
    this.listsComponent = PermissionList;
    this.queryParams = {};
    this.model_width = 500;
  }
  componentDidMount() {}

  freshQueryList = params => {
    this.queryList(params);
  };

  refreshFilter = (params, type) => {
    this.queryParams = params;
    if (type === false) return
    this.freshQueryList(this.queryParams);
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入权限名称|备注进行搜索',
      },
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={4}>
            <Button type='primary' onClick={this.add}>
              新增
            </Button>
          </Col>
          <Col span={20}>
            <FilterTool
              data={data}
              colNum={3}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            edit={this.edit}
            queryList={this.freshQueryList}
            {...this.props}
            rowKey='id'
          />
        </div>
      </div>
    );
  }
}

export default Permission;
